<template>
  <div class="loginPage">
    <div class="loginBox">
      <div class="loginTitle">用户登录</div>
      <div class="loginBody">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="account">
            <el-input
              v-model="ruleForm.account"
              placeholder="请输入账户"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>

          <el-form-item prop="code">
            <el-input v-model="ruleForm.code" placeholder="验证码"></el-input>
            <img :src="codeMa" @click="validateCodeGetRequest()" alt="" />
          </el-form-item>

          <el-form-item>
            <el-button class="loginIn" @click="submitForm('ruleForm')"
              >登入系统</el-button
            >
          </el-form-item>
          <img src="" alt="" />
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { validateCodeGet, loginPort } from "@/api/login";
import { GetCookie, RemoveCookie, getStore, setStore,SetCookie } from "@/config/config";

export default {
  data() {
    return {
      codeMa: "",
      isRemember: false, // 登陆成功 true 存储账户密码至cookie
      img: "",
      checkKey:'',
      ruleForm: {
        account: "",
        password: "",
        code: "",
      }, // 账户密码
      rules: {
        account: [
          { required: true, message: "请重新输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请重新输入密码", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请重新输入验证码", trigger: "blur" },
        ],
      }, // 登录页面校验规则
    };
  },
  mounted() {
    // 获取验证码
    this.validateCodeGetRequest();
  },
  methods: {
    // 登录接口
    loginUser() {
      let _self = this;
      let data = {
        username:_self.ruleForm.account,
        password:_self.ruleForm.password,
        captcha: _self.ruleForm.code,
        checkKey:_self.checkKey,
      };
      console.log(data);
      loginPort(data).then(res=>{
        console.log(res)
      })
      
    },
    // 获取验证码
    validateCodeGetRequest() {
      let _self = this;
      let a=1629428467008
      validateCodeGet(a).then((res) => {
        console.log(res);
        if (res.code == 0) {
          _self.codeMa = res.result;//验证码图片
          console.log(_self.codeMa);
          _self.checkKey=res.timestamp//
        }
      });
    },
    
    // 登录按键
    submitForm(formName) {
      let _self = this;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(_self.ruleForm);
          let { account, password } = _self.ruleForm;
          let data = { account, password };
          SetCookie("isRememberMe", JSON.stringify(data));
          _self.loginUser();
        } else {
          console.log("error submit!!");

          return false;
        }
        this.$router.push({
          path: "/home", //路由的name
          // params:{
          //   // 不是明文发送
          //   Qname:"qwe"
          // }
        });
      });
    },
  },
};
</script>

<style scoped>
div .el-form {
  margin-top: 40px;
}
.loginIn {
  background-color: red;
  text-align: center;
  width: 100%;
  color: white;
}
.loginPage .el-form-item__content {
  width: 350px;
  margin: 0 auto;
}

.loginTitle {
  line-height: 100px;
  background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fefbe2e38ffd7b8094f39349e55dfe551dc0638986921-8wsnbg_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665737144&t=977b11d0956b827f5aec1533d19b711a);
  text-align: center;
  font-size: 30px;
  font-weight: bolder;
  color: white;
}
.loginBox {
  border-radius: 20px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: white;
  width: 400px;
  height: 500px;
  overflow: hidden;
}
.loginPage {
  position: relative;
  background: url(https://oa.gougucms.com/static/home/images/bg.png) no-repeat;
  background-size: 100% 100%;
  height: 100vh;
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}

</style>